<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
	*{padding:0;margin:0;}
	.wrap{width:1200px;margin:0 auto;}
	.box{width:1000px;margin:0 auto;height:256px;overflow:hidden;position:relative;}
	li{list-style:none;}
	.box_content{width:1000px;position:relative;}
	.box_content li{text-align:center;width:1000px;height:256px;line-height:256px;color:white;position:absolute;left:0;top:0;}
	.clr:after { content: ''; display: block; clear: both;}
	.clr { zoom: 1; }
	.box_tab{position:absolute;width:140px;height:30px;left:50%;bottom:0;margin-left:-50px;}
	.box_tab li{width:10px;height:10px;border-radius:50%;background:#666;float:left;margin-left:12px;}
	.box_tab li.active{background:red;}
	.box a.prev{position:absolute;left:0;top:50%;color:white;}
	.box a.next{position:absolute;right:0;top:50%;color:white;}
</style>
<script>
$(function(){
	var s=["#00a1f1","blue","pink","yellow","green","purple"]
	$(".box_content").find("li").each(function(x){
		$(this).css("background",s[x])
	})
	var timer=null;
	var n=0;
	var len=$(".box_content").find("li").length;
	console.log(len);
	var w=$(".box_content").find("li").width();
	console.log(w);
	function change(index){
		$(".box_content").find("li").stop(true).eq(index).fadeIn().siblings().fadeOut();
		$(".box_tab").find("li").stop(true).eq(index).addClass("active").siblings().removeClass("active");
	}
	$(".next").click(function(){
		n++;
		n%=len;
		change(n);
	})
	$(".prev").click(function(){
		n--;
		n=(n+len)%len;
		change(n);
	})
	$(".box").mouseenter(function(){
		clearInterval(timer);
	})
	$(".box").mouseleave(function(){
		timer=setInterval(function(){
			$(".next").click();
		},1000)
	})
	$(".box_tab").find("li").hover(function(){
		n=$(this).index();
		change(n);
	})
	timer = setInterval(function(){
		$(".next").click();
	},1000)
})
</script>
<body>
	<div class="content">
		<div class="wrap">
			<div class="box">
				<ul class="box_content clr">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
				</ul>
				<ul class="box_tab clr">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<a href="javascript:;" class="prev">上</a>
				<a href="javascript:;" class="next">下</a>
			</div>
		</div>
	</div>
</body>
</html>